<template>
	<view class="index-style">
		<view class="index-head" :style="{width:headdata.left + 'px',marginTop:headdata.top + 'px'}">
			<view class="index-head-left" @click="getaddress">{{addressCity}}▼</view>
			<view class="index-head-center">你想住在哪里？</view>
			<image src="../../static/dt.png" mode="" @click="addressClick"></image>
		</view>
		<!-- 轮播图 -->
		<swiper style="width: 100%;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in swiperdata" :key="item">
				<view class="swiper-item">
					<image style="width: 100%;height: 150px;" :src="'../../static/' + item.img" mode=""></image>
				</view>
			</swiper-item>
			
		</swiper>
		<view class="index-center">
			<view class="index-center-list" v-for="item in houselistdata" :key="item.name">
				<image :src="item.img" mode=""></image>
				{{item.name}}
			</view>
		</view>
		<view class="index-hunderd">
			<view class="index-hunderd-text">房产权百科</view>
			<view class="index-hunderd-content">
				<view class="index-hunderd-list" v-for="item in hunderdlistdata" :key="item.name">
					<image :src="item.img" mode=""></image>
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="index-lick">
			<view class="index-lick-text">猜你喜欢</view>
			<!-- 懒加载 -->
			<view class="index-lick-content" v-for="item in lickdata" :key="item.name" @click="footClick(item)">
				<image :src="item.imgs" mode=""></image>
				<view>{{item.name}}</view>
			</view>
			<view style="text-align: center;align-items: 50px;" v-show="showtext">已经到底了哟，看看别的吧~~~~~~</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headdata:{},//头部数据
				swiperdata:[
					{img:"logo.png"},
					{img:"w1.png"},
					{img:"w2.png"},
				],
				houselistdata:[
					{name:"新房",img:"../../static/c1.png"},
					{name:"二手房",img:"../../static/c2.png"},
					{name:"租房",img:"../../static/c3.png"},
					{name:"卖房",img:"../../static/c4.png"},
					{name:"小区房价",img:"../../static/c5.png"},
					{name:"商铺",img:"../../static/c6.png"},
					{name:"问答",img:"../../static/c7.png"},
					{name:"海外房产",img:"../../static/c8.png"}
				],
				hunderdlistdata:[
					{name:"查房价",img:"../../static/h1.png"},
					{name:"找经纪人",img:"../../static/h2.png"},
					{name:"百科",img:"../../static/h3.png"},
					{name:"购房资源",img:"../../static/h4.png"}
				],
				lickdata:[],
				// {
				// 	area: "仁寿县"
				// 	id: 1
				// 	imgs: "http://129.211.169.131:6368/imgs/1.jpg"
				// 	name: "美的云溪郡"
				// 	point: 117
				// 	price: 9000
				// 	range: "仁寿大道"
				// 	type: "4室2厅"
				// }
				
				// 地址
				addressCity:"定位中",
				showtext:false,
				numlick:1,
				footvalue:[]
			}
		},
		onLoad() {
			this.headdata = uni.getMenuButtonBoundingClientRect()
			// console.log(this.headdata)
			
			
			this.getdadalick()
		},
		// 生命周期：页面滚动到底部的事件
		onReachBottom(){
			// 防抖
			if(this.showtext) return
			
			this.numlick++;
			// console.log(this.numlick)
			
			this.getdadalick()
		},
		onPullDownRefresh(){
			console.log("已刷新")
		},
		methods: {
			// 历史记录
			footClick(val){
				this.footvalue.push(val)
				console.log(this.footvalue)
				
				uni.setStorageSync('footvalue', this.footvalue);
			},
			
			// 地图
			addressClick(){
				console.log("地图点击成功")
				
				uni.getLocation({
					// 将函数改为箭头函数，改变this指向
					success: ({longitude,latitude}) => {
						console.log('当前位置' + longitude+latitude);
						
						// 调用高德API
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							success: function () {
								console.log('success');
							}
						});
						
					}
				})
			},
			
			// 获取猜你喜欢数据
			getdadalick(){
				uni.request({
					url:"http://129.211.169.131:6368/gethouse",
					data:{
						page:this.numlick,
						pagesize:"10"
					},
					success: (res) => {
						if(res.data.data.length == 0){
							this.showtext = true
						}else{
							this.lickdata.push(...res.data.data)
							console.log(this.lickdata);
						}
						
					}
				})
			},
			
			// 获取地址，授权
			getaddress(){
				uni.getLocation({
					// 将函数改为箭头函数，改变this指向
					success: ({longitude,latitude}) => {
						console.log('当前位置' + longitude+latitude);
						
						// 调用高德API
						uni.request({
							url:"https://restapi.amap.com/v3/geocode/regeo",
							data:{
								key:"bce319abefef77ab984077de335f22be",
								location:longitude+ "," +latitude
							},
							success: (res) => {
								// console.log(res)
								this.addressCity = res.data.regeocode.addressComponent.city
								// console.log(this.addressCity)
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.index-style{
		background-color: #ccc;
		font-size: 14px;
		.index-head{
			display: flex;
			align-items: center;
			font-size: 14px;
			color: #fff;
			.index-head-left{
				width: 64px;
				margin-left: 6px;
			}
			.index-head-center{
				flex: 1;
				margin: 0 6px;
				border-radius: 16px;
				background-color: #fff;
				padding: 0 6px;
				color: #ccc;
				line-height: 26px;
			}
			image{
				width: 32px;
				height: 30px;
				margin-right: 6px;
			}
		}
		.index-center{
			background-color: #fff;
			padding: 16px 20px;
			display: flex;
			flex-wrap: wrap;
			.index-center-list{
				width: 25%;
				// margin: 10px 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					width: 50px;
					height: 50px;
					margin: 6px 0;
				}
			}
		}		
		.index-hunderd{
			background-color: #fff;
			padding: 0 20px 20px 20px;
			margin:10px 0;
			.index-hunderd-text{
				font-size: 20px;
				font-weight: bold;
				color: #00aa00;
				line-height: 50px;
			}
			.index-hunderd-content{
				display: flex;
				flex-wrap: wrap;
				.index-hunderd-list{
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					image{
						width: 30px;
						height: 30px;
						margin: 6px 0;
					}
				}
			}
		}
		.index-lick{
			background-color: #fff;
			padding: 0 20px;
			margin:10px 0;
			.index-lick-text{
				font-size: 20px;
				font-weight: bold;
				color: #00aa00;
				line-height: 50px;
			}
			.index-lick-content{
				display: flex;
				align-items: center;
				image{
					width: 80px;
					height: 100px;
					margin-top: 6px;
					margin-right: 20px;
				}
				view{
					font-size: 20px;
					font-weight: bold;
				}
			}
		}
		
		
	}
</style>
